<template>
  <div>
    <h2>CD</h2>
    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-item label="来源类型">
        <a-select
          v-decorator="[
            'src',
            {
              rules: [
                { required: true, message: 'Please select your source type!' },
              ],
            },
          ]"
          placeholder="Select Source Type"
          @change="handleSelectChange"
        >
          <a-select-option value="CD_GRAB"> CD_GRAB </a-select-option>
          <a-select-option value="WEB_DL"> WEB_DL </a-select-option>
          <a-select-option value="UNKNOWN"> UNKNOWN </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="品番">
        <a-input
          v-decorator="[
            'code',
            {
              rules: [{ required: true, message: 'Please input your title!' }],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="艺术家">
        <a-input
          v-decorator="[
            'artist',
            {
              rules: [{ required: true, message: 'Please input your title!' }],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="专辑名">
        <a-input
          v-decorator="[
            'title',
            {
              rules: [{ required: true, message: 'Please input your title!' }],
            },
          ]"
        />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit"> 生成 </a-button>
      </a-form-item>
    </a-form>
    <template>
      <a-textarea placeholder="暂未生成" :rows="4" :value="output" />
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: "coordinated" }),
      output: "",
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
        }
        this.output = `[CD][${values['src']}][${values['code']}][${values['artist']}][${values['title']}]`
      });
    },
    handleSelectChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`,
      });
    },
  },
};
</script>
